<template>
    <div id="AdvertisementBox" :style="{ backgroundImage: 'url(' + Img + ')' }">
        <h2>{{ componentTitle }}</h2>

        <span class="dividingLine"></span>

        <h4>{{ componentContent }}</h4>

        <router-link :to="{name: 'register'}" class="routerLinkButton text-center">
            <i class="fa fa-hand-o-right"></i>
            点击注册
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "advertisementBox",
        data() {
            return {
                Img: require('@/assets/images/homeBG.jpg'),
            }
        },
        props: {
            componentTitle: {
                type: String,
                default: '标题'
            },
            componentContent: {
                type: String,
                default: '内容'
            }
        }
    }
</script>

<style scoped>
    #AdvertisementBox{
        position: relative;
        width: 100%;
        height: 600px;
    }

    h2, h4{
        color: #eeeeee;
        cursor: default;
    }

    h2{
        position: absolute;
        top: 32.5%;
        left: 50%;
        transform: translateX(-50%);
    }

    h4{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }

    .dividingLine{
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 1px;
        border-bottom: 1px solid #555555;
        cursor: none;
    }

    .routerLinkButton{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        margin-top: 20px;
        display: block;
        color: #ffffff;
        border-radius: 4px;
        background-color: #00A1FF;
        transition: 0.4s;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .routerLinkButton:hover{
        background-color: #538dff;
        color: #000000;
    }
</style>
